<template>
  <div>
    <Drawer :title="title" v-model="visible" :width="width" :mask-closable="false">
      <div class="demo-split">
        <Split v-model="split1">
          <div slot="left" class="demo-split-pane">
            <Table
              border
              :columns="columns"
              :data="attachmentList"
              sortable="custom"
              @on-row-click="changeImage"
              ref="table">
            </Table>
          </div>
          <div slot="right" class="demo-split-pane">
            <Scroll :height="height-60">
              <img :src="currentImage" :height="imgHeight" />
            </Scroll>
            
          </div>
        </Split>
      </div>
      
      <div class="demo-drawer-footer">
        <Button @click="handleCancel" style="margin-right: 36px;margin-top: -26px;">关闭</Button>
        <Button @click="refresh" style="margin-right: 36px;margin-top: -26px;">刷新</Button>
        <Upload style="display: inline-block;"
          ref="upload"
          :show-upload-list="false"
          :on-success="handleSuccess"
          :format="['jpg','jpeg','png']"
          :max-size="1024"
          :on-format-error="handleFormatError"
          :on-exceeded-size="handleMaxSize"
          :before-upload="handleBeforeUpload"
          :headers="accessToken"
          multiple
          type="drag"
          :action="action">
          <Button icon="ios-cloud-upload-outline" v-if="data.showUploads">上传</Button>
        </Upload>
        
      </div>
    </Drawer>
    
  </div>
</template>
<script>
import { getAllAttachment, getAttachment, insertAttachment, destroyAttachment, deleteFile } from '@/api/project';
import { base_url, base } from '@/libs/axios';
import { getStore } from '@/libs/storage';
export default {
  name: 'attachment-manager',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object
    }
  },
  data() {
    return {
      visible: this.value,
      title: '',
      height: 540,
      width: 1400,
      imgHeight: 540,
      submitLoading: false,
      split1: 0.2,
      attachmentList: [],
      currentImage: '',
      accessToken: {},
      action: `${base}/upload`,
      uploadList: [],
      columns: [
        {
          title: '操作',
          key: 'action',
          width: 80,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.remove(params.row)
                  }
                }
              }, '删除'),
            ]);
          }
        },
        {
          title: '附件名称',
          key: 'name',
          width: 160
        },
        // {
        //   title: '路径',
        //   key: 'url',
        //   width: 450
        // }
      ]
    }
  },
  methods: {
    handleSuccess(res, file, fileList) {
      if(res.code === 0) {
        let params = {
          project_id: this.data.project_id,
          type: this.data.type,
          name: res.data.name.split('.')[0],
          url: res.data.url
        };
        insertAttachment(params).then(res => {
          if (res.code === 0) {
            this.$Message.success(res.message);
          }
        })
      }
      this.getAttachmentList();
    },
    handleFormatError(file) {

    },
    handleFormatError(file) {

    },
    handleFormatError(file) {

    },
    handleMaxSize(file) {

    },
    handleBeforeUpload() {
      const check = this.uploadList.length < 10;
      if (!check) {
        this.$Notice.warning({
          title: 'Up to five pictures can be uploaded.'
        });
      }
      return check;
    },
    remove(v) {
      if (!this.data.showUploads) {
        this.$Message.error('抱歉，您没有操作权限！');
        return;
      }
      this.$Modal.confirm({
        title: '确认删除',
        content: '删除不可恢复，你确认要删除'+v.name+'附件吗？',
        onOk: () => {
          const id = v.id;
          const filename = v.url;
          destroyAttachment({id}).then(res => {
            if (res.code === 0) {
              if (filename) {
                deleteFile({filename});
              }
              this.getAttachmentList();
              this.setCurrentImage();
            }
          })
        }
      })
    },
    changeImage(v) {
      this.currentImage = `${base_url}/public/uploads/${v.url}`;
    },
    getAttachmentList() {
      if (this.data.showAll) {
        const params = { project_id: this.data.project_id };
        getAllAttachment(params).then(res => {
          if (res.code === 0) {
            this.attachmentList = res.data;
            
          }
        });
      } else {
        const params = {
          project_id: this.data.project_id,
          type: this.data.type
        };
        getAttachment(params).then(res => {
          if (res.code === 0) {
            this.attachmentList = res.data;
          }
        })
      }
    },
    setCurrentImage() {
      if (this.attachmentList.length > 0) {
        this.currentImage = `${base_url}/public/uploads/${this.attachmentList[0].url}`;
      } else {
        this.currentImage = '';
      }
    },
    refresh() {
      this.getAttachmentList();
      this.setCurrentImage();
    },
    init() {
      this.title = '附件管理';
      this.getAttachmentList();
      this.setCurrentImage();
    },
    handleCancel() {
      this.visible = false;
    },
    setCurrentValue(value) {
      this.visible = value;
    },
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
      
    },
    visible(value) {
      this.init();
      this.$emit("input", value);
    }
  },
  mounted() {
    this.height = Number(document.documentElement.clientHeight - 100);
    this.imgHeight = Number(document.documentElement.clientHeight - 190);
    this.width = Number(document.documentElement.clientWidth - 300);
    this.accessToken = {
      accessToken: getStore("accessToken")
    };
    this.uploadList = this.$refs.upload.fileList;
  }
}
</script>
<style lang="less" scoped>
.demo-drawer-footer{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
.cover-content{
  text-indent: 160px;
  margin-bottom: 15px;
}
.text-content{
  margin: 46px 46px;
}
.text-content p{
  text-indent: 36px;
  font-size: 18px;
}
.paperStyle {
  border: solid 1px #bdbdbd;
  margin: 24px auto;
}
.height100{
  height: 100px;
}
.height50{
  height: 50px;
  line-height: 22px;
}
.demo-split{
  height: calc(100vh - 140px);
  border: 1px solid #dcdee2;
}
.demo-split-pane{
  padding: 10px;
}
</style>